import './index.less'
import LiveDataCard from '@/components/card/liveDataCard'
import BigScreenModal from '@/components/modal/bigScreenShow'
import LiveDataShowScreen from '@/components/others/liveShowDataScreen'
import {ProductFilesItem} from '@/components/others/productFilesItem'
import {CnBoldP, CnNormalP} from '@/components/text'
import useDeviceHook from '@/hooks/device'
import useModal from '@/hooks/modalHook'
import SimpleCard from './simpleCard/index'
import common from '@/utils/common.js'

const LiveDataShow = defineComponent({
  setup(props, ctx) {
    // 滚动表格的查询点击事件

    const {simpleDevList, updateSimpleDevList} = useDeviceHook()

    const {visible, openModal, closeModal} = useModal()
    const {
      visible: liveDataShowScreenVisible,
      openModal: liveDataShowScreenVisibleOpen,
      closeModal: liveDataShowScreenVisibleClose
    } = useModal()

    const state = reactive<{crrentDevs: SimpleDeviceData[]; currentShowType: 1 | 2}>({
      crrentDevs: [],
      currentShowType: 1
    })

    function handleOkClick(data: {devIdList: number[]; showType: 1 | 2}) {
      const crrentDevs = data.devIdList.map(devId => {
        return simpleDevList.value.find(dev => dev.devId === devId) as SimpleDeviceData
      })
      state.crrentDevs = crrentDevs
      state.currentShowType = data.showType

      closeModal()
      liveDataShowScreenVisibleOpen()
    }

    onMounted(() => {
      updateSimpleDevList({updateList: true})
      showArrangeIconFunc()
    })

    const showArrangeIconFunc = () => {
      switch (arrangeCode.value) {
        // case '101':
        //   arrangeIconList.value = ['jianyue_active', 'jingjian_default', 'xiangxi_default']
        //   break
        case '102':
          arrangeIconList.value = ['jingjian_active', 'xiangxi_default']
          break
        case '103':
          arrangeIconList.value = ['jingjian_default', 'xiangxi_active']
          break
        default:
          break
      }
    }

    const showArrangeIconClick = (index: number) => {
      console.log(index)
      switch (index) {
        case 0:
          arrangeCode.value = '102'
          break
        case 1:
          arrangeCode.value = '103'
          break
        // case 2:
        //   arrangeCode.value = '103'
        //   break
        default:
          break
      }
      showArrangeIconFunc()
    }

    // 排版模式的标识代码
    /* 
       101 -- 简约模式
       102 -- 精简模式
       103 -- 详细模式
    */
    const arrangeCode = ref('102')
    const arrangeIconList = ref<any>([])

    // 控制显示卡片展示模式的组件函数
    const showCardPPatternFunc = () => {
      let cardEle = <div></div>
      switch (arrangeCode.value) {
        // case '101':
        //   nextTick(() => {
        //     common.scrollUp(reportTable.value)
        //   })
        //   cardEle = showTable()
        //   break
        case '102':
          cardEle = showCardSimple()
          // cardEle = showCardTidy()
          break
        case '103':
          cardEle = detailCardSimple()
          break
        default:
          break
      }

      return cardEle
    }

    // 简约模式显示的卡片模式
    const showCardSimple = () => {
      return (
        <div class='simple_card_box animate__animated animate__fadeInUp'>
          {simpleDevList.value && simpleDevList.value.length
            ? simpleDevList.value.map(dev => <SimpleCard devInfo={dev} />)
            : null}
        </div>
      )
    }

    // 滚动表格模式的数据
    const showTableDataSource = ref([
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      },
      {
        devName: '设备1',
        devType: '设备类型1',
        param1: Math.floor(Math.random() * 100 + 1),
        param2: Math.floor(Math.random() * 100 + 1),
        param3: Math.floor(Math.random() * 100 + 1),
        param4: Math.floor(Math.random() * 100 + 1),
        param5: Math.floor(Math.random() * 100 + 1),
        param6: Math.floor(Math.random() * 100 + 1),
        param7: Math.floor(Math.random() * 100 + 1),
        param8: Math.floor(Math.random() * 100 + 1),
        waterQualityType: '良好',
        monitoringStatus: 1
      }
    ])

    // 表格显示的数据

    // 单元格文字提示显示的标题
    const showTableParamsTitle = (row: any) => {
      console.log(row)
      let str = row.record.param1
      return str
    }

    // 滚动表格的表头规则
    const showTableColumns = ref([
      {
        title: '设备名称',
        dataIndex: 'devName',
        align: 'center'
      },
      {
        title: '所属类型',
        dataIndex: 'devType',
        align: 'center'
      },
      {
        title: '参数1',
        dataIndex: 'param1',
        align: 'center',
        width: 120,
        customRender: (row: any) => {
          return (
            <>
              <a-tooltip placement='right' title={'参数1：' + row.record.param1}>
                <span>{row.record.param1}</span>
              </a-tooltip>
            </>
          )
        }
      },
      {
        title: '参数2',
        dataIndex: 'param2',
        align: 'center',
        width: 120,
        customRender: (row: any) => {
          return (
            <>
              <a-tooltip placement='right' title={'参数2：' + row.record.param2}>
                <span>{row.record.param2}</span>
              </a-tooltip>
            </>
          )
        }
      },
      {
        title: '参数3',
        dataIndex: 'param3',
        align: 'center',
        width: 120,
        customRender: (row: any) => {
          return (
            <>
              <a-tooltip placement='right' title={'参数3：' + row.record.param3}>
                <span>{row.record.param3}</span>
              </a-tooltip>
            </>
          )
        }
      },
      {
        title: '参数4',
        dataIndex: 'param4',
        align: 'center',
        width: 120,
        customRender: (row: any) => {
          return (
            <>
              <a-tooltip placement='right' title={'参数4：' + row.record.param4}>
                <span>{row.record.param4}</span>
              </a-tooltip>
            </>
          )
        }
      },
      {
        title: '参数5',
        dataIndex: 'param5',
        align: 'center',
        width: 120,
        customRender: (row: any) => {
          return (
            <>
              <a-tooltip placement='right' title={'参数5：' + row.record.param5}>
                <span>{row.record.param5}</span>
              </a-tooltip>
            </>
          )
        }
      },
      {
        title: '参数6',
        dataIndex: 'param6',
        align: 'center',
        width: 120,
        customRender: (row: any) => {
          return (
            <>
              <a-tooltip placement='right' title={'参数6：' + row.record.param6}>
                <span>{row.record.param6}</span>
              </a-tooltip>
            </>
          )
        }
      },
      {
        title: '参数7',
        dataIndex: 'param7',
        align: 'center',
        width: 120,
        customRender: (row: any) => {
          return (
            <>
              <a-tooltip placement='right' title={'参数7：' + row.record.param7}>
                <span>{row.record.param7}</span>
              </a-tooltip>
            </>
          )
        }
      },
      {
        title: '参数8',
        dataIndex: 'param8',
        align: 'center',
        width: 120,
        customRender: (row: any) => {
          return (
            <>
              <a-tooltip placement='right' title={'参数8：' + row.record.param8}>
                <span>{row.record.param8}</span>
              </a-tooltip>
            </>
          )
        }
      },
      {
        title: '水质类型',
        dataIndex: 'waterQualityType',
        align: 'center'
      },
      {
        title: '监测状态',
        dataIndex: 'monitoringStatus',
        align: 'center'
      }
    ])

    // 表格ref数据
    const reportTable = ref('')

    onMounted(() => {
      // nextTick(() => {
      //   common.scrollUp(reportTable.value)
      // })
    })

    // 滚动表格模式渲染的搜索表单数据
    const scrollTableFormData = ref({
      devName: ''
    })

    const scrollTableSearchClick = () => {
      console.log(scrollTableFormData.value.devName)

      console.log('触发了查询的点击事件 ')
    }

    // 表格滚动模式显示的卡片模式
    const showTable = () => {
      // nextTick(() => {
      //   common.scrollUp(reportTable.value)
      // })
      return (
        <div>
          <a-card class='card_header_box' style='z-index:100;'>
            <div class='search_box flex'>
              <div class='search_item'>
                <span>设备名称</span>
                <a-input
                  class='w-220 ml-10'
                  v-model={[scrollTableFormData.value.devName, 'value']}
                ></a-input>
              </div>
              <div class='search_btn_box ml-30'>
                <a-button type='primary' onClick={scrollTableSearchClick}>
                  查询
                </a-button>
              </div>
            </div>
          </a-card>
          <a-card class='card_table_box' style='padding:0px;margin-top:20px'>
            <a-table
              class='ant-table-striped scroll_table'
              ref={reportTable}
              dataSource={showTableDataSource.value}
              pagination={false}
              columns={showTableColumns.value}
              scroll={{x: 1500, y: 420}}
              style='overflow: auto;z-index:90;'
              size='small'
              rowClassName={(index: any) => (index % 2 === 1 ? 'table-striped' : null)}
            ></a-table>
          </a-card>
        </div>
      )
    }

    // 详细模式显示的卡片模式
    const detailCardSimple = () => {
      return (
        <div class='card_box grid grid-cols-2 gap-x-20 gap-y-20 animate__animated animate__fadeInUp'>
          {simpleDevList.value && simpleDevList.value.length
            ? simpleDevList.value.map(dev => (
                <LiveDataCard devId={dev.devId} onBigScreenShow={openModal}></LiveDataCard>
              ))
            : null}
        </div>
      )
    }

    // 模式图标的鼠标悬浮标题函数
    const arrangeIconSlotTitleFunc = (index: any) => {
      let title = ''
      switch (index) {
        case 0:
          title = '精简排列模式'
          break
        case 1:
          title = '详细排列模式'
          break
        case 2:
          title = '详细排列模式'
        default:
          break
      }
      return title
    }

    // const slots = {
    //   content: arrangeIconSlot()
    // }

    return () => (
      <div class='pb-24 liveDataShow'>
        <CnBoldP class='mt-11 text-20'>实时数据</CnBoldP>

        <CnNormalP class='mt-6 mb-20 text-4xText'>
          展示设备所监测到的实时数据指标。并支持在点击大屏展示后，全屏展示所有设备的实时数据。
        </CnNormalP>

        <ProductFilesItem></ProductFilesItem>
        <div class='card_box'>
          {showCardPPatternFunc()}

          {/* 排列方式图标 */}
          <div class='arrange_icon_box'>
            {arrangeIconList.value.map((icon: any, index: number) => (
              <a-tooltip placement='topLeft' title={arrangeIconSlotTitleFunc(index)}>
                {/* {slots.content?.('111')} */}
                {/* <template v-slot='{row,index}'>
                </template> */}
                {/* <template v-slot:content>
                  <p>Content</p>
                  <p>Content</p>
                </template> */}
                <img
                  src={`https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/${icon}.png`}
                  onClick={() => {
                    showArrangeIconClick(index)
                  }}
                />
              </a-tooltip>
            ))}
          </div>
        </div>
        {/* <div class='grid grid-cols-2 gap-x-20 gap-y-20'> */}
        {/* {showCardSimple()} */}
        {/* {simpleDevList.value && simpleDevList.value.length
            ? simpleDevList.value.map(dev => (
                <LiveDataCard devId={dev.devId} onBigScreenShow={openModal}></LiveDataCard>
              ))
            : null} */}
        {/* </div> */}

        <BigScreenModal
          visible={visible.value}
          onCancel={closeModal}
          onOk={handleOkClick}
        ></BigScreenModal>

        <LiveDataShowScreen
          visible={liveDataShowScreenVisible.value}
          devs={state.crrentDevs}
          showType={state.currentShowType}
          onClose={liveDataShowScreenVisibleClose}
        ></LiveDataShowScreen>
      </div>
    )
  }
})

export default LiveDataShow
